<html>
  <head>
    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/font-awesome.min.css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
      rel="stylesheet"
    />
    <style>
      body {
        /* background: rgb(221, 208, 208); */
        /* background:#333; */
        font-family: 'Arial';
        /* font-size: 18px !important; */
        width: 100%;
        display: flex;
        flex-direction: column;
        margin-left: 20px;
      }
      h1 {
        color: grey;
      }
      .mermaid2,
      .mermaid3 {
        display: none;
      }
      .mermaid {
      }
      .mermaid svg {
        border: 1px solid purple;
        /* font-size: 18px !important; */
        fontfamily: 'courier';
      }
    </style>
  </head>
  <body>
    <pre class="mermaid" style="width: 50%">
      %%{init: {"flowchart": {"htmlLabels": true}} }%%
      flowchart LR
      b("`The dog in **the** hog.(1).. a a a a *very long text* about it
      Word!
      
      Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words. Another line with many, many words.`") --apa--> c
      
          </pre
    >
    <pre class="mermaid" style="width: 50%">
      classDiagram-v2

      classA -- classB : Inheritance
      classA -- classC : link
      classC -- classD : link
      classB -- classD
    </pre>
    <pre class="mermaid" style="width: 50%">
      sequenceDiagram
      Alice->>Bob: Extremely utterly long line of longness which had previously overflown the actor box as it is much longer than what it should be
      loop Loopy
          Bob->>Alice: Pasten
      end
    </pre>
    <pre class="mermaid" style="width: 50%">
      %%{init: {"flowchart": {"htmlLabels": false}} }%%
      flowchart LR
      b("`The dog in **the** hog.(1)
      NL`") --"`1o **bold**`"--> c[new strings svg labels]
    </pre>
    <pre class="mermaid" style="width: 50%">
      %%{init: {"flowchart": {"htmlLabels": true}} }%%
      flowchart LR
      b("`The dog in **the** hog.(1)
      NL`") --"`1o **bold**`"--> c[new strings html labels]
    </pre>
    <pre class="mermaid" style="width: 50%">
      %%{init: {"flowchart": {"htmlLabels": true}} }%%
      flowchart LR
      b("The dog in the hog.(1)\nNL") --"1o bold"--> c[old strings svg labels]
    </pre>
    <script type="module">
      // import mindmap from '../../packages/mermaid-mindmap/src/detector';
      // import example from '../../packages/mermaid-example-diagram/src/mermaid-example-diagram.core.mjs';
      import mermaid from './mermaid.esm.mjs';
      // await mermaid.registerExternalDiagrams([example]);
      mermaid.parseError = function (err, hash) {
        // console.error('Mermaid error: ', err);
      };
      mermaid.initialize({
        // theme: 'forest',
        startOnLoad: true,
        logLevel: 0,
        flowchart: {
          // defaultRenderer: 'elk',
          useMaxWidth: false,
          // htmlLabels: false,
          htmlLabels: true,
        },
        // htmlLabels: false,
        gantt: {
          useMaxWidth: false,
        },
        sequence: {
          wrap: true,
        },
        useMaxWidth: false,
      });
      function callback() {
        alert('It worked');
      }
      mermaid.parseError = function (err, hash) {
        console.error('In parse error:');
        console.error(err);
      };
      // mermaid.test1('first_slow', 1200).then((r) => console.info(r));
      // mermaid.test1('second_fast', 200).then((r) => console.info(r));
      // mermaid.test1('third_fast', 200).then((r) => console.info(r));
      // mermaid.test1('forth_slow', 1200).then((r) => console.info(r));
    </script>
  </body>
</html>
